<script type="text/javascript" charset="utf-8" src="__STATIC_JS__/jquery-2.1.3.min.js"> </script>
<form class="layui-form seller-form"  action="" >
    <input type="hidden" name="plan_code" value="{$planCode}">

    <div class="layui-form-item"> 
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-1">部/院：</label>
            <div class="layui-input-inline" style="width: 180px;">
                <!-- <select disabled="true" Readonly="true" name="edit_dep_id" lay-filter="edit_dep_id" id="edit_dep_id" list="dep_list" lay-search> -->
                <select name="edit_dep_id" lay-filter="edit_dep_id" id="edit_dep_id" list="dep_list" lay-search>
                    <option value=""></option>
                    <datalist  id="dep_list" lay-search>
                        {volist name="deptList" id="deptList"}
                        <option value="{$deptList.bmdm}" {eq name="$bmmc" value="$deptList.bmmc"}selected{/eq}>{$deptList.bmmc}</option>
                        {/volist}
                    </datalist>
                </select>
            </div>	
        </div>
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-1">专业：</label>
            <div class="layui-input-inline" style="width: 180px;">
                <!-- <select disabled="true" Readonly="true" name="edit_specialty_id" lay-filter="edit_specialty_id" id="edit_specialty_id" list="specialty_list" lay-search> -->
                <select name="edit_specialty_id" lay-filter="edit_specialty_id" id="edit_specialty_id" list="specialty_list" lay-search>
                    <option value=""></option>
                    <datalist  id="specialty_list" lay-search>
                        {volist name="specialtyList" id="specialtyList"}
                        <option value="{$specialtyList.zydm}" {eq name="$zymc" value="$specialtyList.zymc"}selected{/eq}>{$specialtyList.zymc}</option>
                        {/volist}
                    </datalist>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-1">方向：</label>
            <div class="layui-input-inline" style="width: 80px;">
                <!-- <select disabled="true" Readonly="true" name="edit_dir" lay-filter="edit_dir" id="edit_dir" list="dir_list" lay-search></select> -->
                <select name="edit_dir" lay-filter="edit_dir" id="edit_dir" list="dir_list" lay-search>
                    <option value=""></option>
                    <datalist  id="dir_list" lay-search>
                        {volist name="dirList" id="dirList"}
                        <option value="{$dirList.id}" {eq name="$dirName" value="$dirList.name"}selected{/eq}>{$dirList.name}</option>
                        {/volist}
                    </datalist>
                </select>
            </div>
        </div>
        
        <div class="layui-inline">
            <button id="rel_get_save" class="layui-btn layui-btn-sm" lay-submit lay-filter="getRelList"><i class="iconfont icon-chaxun"></i>查询</button>
           <button id="rel_edit_save" class="layui-btn layui-btn-sm" lay-submit lay-filter="saveRelList"><i class="iconfont icon-baocun"></i>保存</button>
        </div>
    </div>
</form>

<div class="table-body">
    <div id="editRelTransfer" class="editRelTransfer"></div>
</div>

<script>
    layui.use(['table','form','layer','transfer'],function(){
        var layer = layui.layer, table = layui.table,form = layui.form,transfer = layui.transfer;
         
        form.render();

        JsPost("{:url('PlanStudentRel/getUnRelList')}?bmdm={$bmdm}&zydm={$zydm}&dir={$dir}&rxnd={$rxnd}&xsxzdm={$xsxzdm}&plan_code={$planCode}", [], function(res){
            if(res.status){
                //实例调用
                transfer.render({
                    elem: '#editRelTransfer' ,
                    title: ['未关联', '已关联'],
                    data: res.data,
                    width: '375',
                    height: '320',
                    id: 'editRelTransfer',
                    parseData: function(res) {
                        return {
                            "value":res.bjdm + '-' + res.dir,//数据值
                            "title":res.bjmc + '-' + res.dirName,//数据值
                        }
                    },
                    value: res.value
                });
            }else{
                layer.msg(res.msg);
            }
        })
  
        layui.use('form', function () {
            // 联动部门
            form.on('select(edit_dep_id)', function (data) {
                getSpecialty(data);
            });
        });

        // 得到专业
        function getSpecialty(data) {
            $.ajax({
                type: 'get',
                url: "{:url('BookCommon/getSpecicalties')}",
                data: 'bmdm=' + data.value,
                success: function(e) {
                    if(e.status) {
                        $("#edit_specialty_id").empty();//清空下拉框的值
                        $('#edit_specialty_id').append(new Option('', ''));// 下拉菜单里添加元素
                        $.each(e.data.data, function (index, item) {
                            $('#edit_specialty_id').append(new Option(item.zymc, item.zydm));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");//重新渲染 固定写法
                    } else {
                        layer.msg(e.msg);
                    }
                }
            });
        };
        
        // 获取符合条件且尚未关联的班级列表
        form.on('submit(getRelList)', function(data){ 
            JsPost("{:url('PlanStudentRel/getUnRelList')}?bmdm="+data.field.edit_dep_id+"&zydm="+data.field.edit_specialty_id+"&dir="+data.field.edit_dir+"&rxnd={$rxnd}&xsxzdm={$xsxzdm}&plan_code={$planCode}", [], function(res){
                if(res.status){
                    //实例调用
                    transfer.render({
                        elem: '#editRelTransfer' ,
                        title: ['未关联', '已关联'],
                        data: res.data,
                        width: '375',
                        height: '320',
                        id: 'editRelTransfer',
                        parseData: function(res) {
                            return {
                                "value":res.bjdm + '-' + res.dir,//数据值
                                "title":res.bjmc + '-' + res.dirName,//数据值
                            }
                        },
                        value: res.value
                    });
                }else{
                    layer.msg(res.msg);
                }
            })
            return false; 
        });

        // 保存关联的班级列表
        form.on('submit(saveRelList)', function(data){ 
            var getData = transfer.getData('editRelTransfer'); //获取右侧数据

            var params='';
            for(i = 0; i < getData.length; i++) { 
                params += getData[i].value + ',';
            }
            params = params.substring(0, params.length - 1);

            $("#rel_edit_save").addClass("layui-btn-disabled");
            $('#rel_edit_save').attr("disabled", true);
            $.ajax({
                type: 'post',
                url: '{:url("PlanStudentRel/edit")}',
                data: {'params': params, 'planCode':"{$planCode}"},
                dataType: 'json',
                success: function (e) {
                    layer.close(window.box);
                    
                    $('#rel_edit_save').removeClass("layui-btn-disabled");
                    $('#rel_edit_save').removeAttr("disabled");

                    layer.msg(e.msg, { time: 1300 });
                }
            });
            return false; 
        });
    })
</script>
